<template>
<p>在标签中添加 <code>:props="props"</code> 并设置 <code>props = { multiple: true }</code> 来开启多选模式。</p>
<p>正确用法：</p>
<div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&lt;</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">template</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">  &lt;</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">el-cascader</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;"> :props</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">=</span><span style="--shiki-light: #032F62; --shiki-dark: #9ECBFF;">"props"</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&lt;/</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">template</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&lt;</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">script</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;"> lang</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">=</span><span style="--shiki-light: #032F62; --shiki-dark: #9ECBFF;">"ts"</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;"> setup</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">  const</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> props</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;"> =</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> { multiple: </span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;">true</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&lt;/</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">script</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&gt;</span></span></code></pre></div>
<p>错误用法：</p>
<div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&lt;</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">template</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light: #6A737D; --shiki-dark: #6A737D;">  &lt;!--  Object literal binging here is invalid syntax for cascader  --&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">  &lt;</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">el-cascader</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;"> :props</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">=</span><span style="--shiki-light: #032F62; --shiki-dark: #9ECBFF;">"{ multiple: true }"</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&lt;/</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">template</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&gt;</span></span></code></pre></div>
<div text="sm" m="y-4" data-v-72294632=""><p>使用多选时，所有选中的标签将默认显示。 您可以设置 <code>collapse = true</code> 将选中的标签折叠。 您可以设置 <code>max-collapse-tags</code> 来显示最大tag数量，默认1。 您可以使用 <code>collapse-tags-tooltip</code> 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。</p>
</div>
  <div class="m-4">
    <p>Display all tags (default)</p>
    <el-cascader :options="options" :props="props" clearable />
  </div>
  <div class="m-4">
    <p>Collapse tags</p>
    <el-cascader :options="options" :props="props" collapse-tags clearable />
  </div>
  <div class="m-4">
    <p>Collapse tags tooltip</p>
    <el-cascader
      :options="options"
      :props="props"
      collapse-tags
      collapse-tags-tooltip
      clearable
    />
  </div>
  <div class="m-4">
    <p>Max Collapse Tags</p>
    <el-cascader
      :options="options"
      :props="props"
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="3"
      clearable
    />
  </div>
</template>

<script lang="ts" setup>
const props = { multiple: true }

const options = [
  {
    value: 1,
    label: 'Asia',
    children: [
      {
        value: 2,
        label: 'China',
        children: [
          { value: 3, label: 'Beijing' },
          { value: 4, label: 'Shanghai' },
          { value: 5, label: 'Hangzhou' },
        ],
      },
      {
        value: 6,
        label: 'Japan',
        children: [
          { value: 7, label: 'Tokyo' },
          { value: 8, label: 'Osaka' },
          { value: 9, label: 'Kyoto' },
        ],
      },
      {
        value: 10,
        label: 'Korea',
        children: [
          { value: 11, label: 'Seoul' },
          { value: 12, label: 'Busan' },
          { value: 13, label: 'Taegu' },
        ],
      },
    ],
  },
  {
    value: 14,
    label: 'Europe',
    children: [
      {
        value: 15,
        label: 'France',
        children: [
          { value: 16, label: 'Paris' },
          { value: 17, label: 'Marseille' },
          { value: 18, label: 'Lyon' },
        ],
      },
      {
        value: 19,
        label: 'UK',
        children: [
          { value: 20, label: 'London' },
          { value: 21, label: 'Birmingham' },
          { value: 22, label: 'Manchester' },
        ],
      },
    ],
  },
  {
    value: 23,
    label: 'North America',
    children: [
      {
        value: 24,
        label: 'US',
        children: [
          { value: 25, label: 'New York' },
          { value: 26, label: 'Los Angeles' },
          { value: 27, label: 'Washington' },
        ],
      },
      {
        value: 28,
        label: 'Canada',
        children: [
          { value: 29, label: 'Toronto' },
          { value: 30, label: 'Montreal' },
          { value: 31, label: 'Ottawa' },
        ],
      },
    ],
  },
]
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>